<template>
  <div class="container">
    <div class="mar-container">
      <h3>通过router-link传递参数</h3>
      <div>
        <router-link :to="`/show/${page}`"> 传递一个参数，通过router-link </router-link>
      </div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>价格表</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <div v-for="(item, index) in lists" :key="item.id" class="text item" @click="handleDetails(item.id)">
        <div class="list-block">
          <div class="list-block-left">
            <img :src="item.url" alt="">
          </div>
          <div class="list-block-right">
            <p> {{ item.title }} </p>
            <p> {{ item.sale }} </p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        page: 50,
        lists: [
          { id: 14, title: 'Lace-Up High Top Letter Print Athletic Shoes', sale: '45.33', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
          { id: 22, title: 'Ehpro Armor Prime Mod - Black', sale: '54.22', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
          { id: 53, title: '测试-gb-60108', sale: '343.22', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
          { id: 24, title: '测试-gb-65005', sale: '432.22', url: 'https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2018/03/09/source-img/20180309164914_55346.jpg' },
        ]
      }
    },
    methods: {
      handleDetails (id) {
        // this.$router.push({ name: 'show', params: { id } })
        this.$router.push({ path: `/show/${id}` })
      },
    },
  }
</script>

<style lang="stylus">
  .container {
    .mar-container {
      text-align left;
      margin 45px 0;
    }
    .list-block {
      box-shadow: 0 0 5px #eeee;
      margin: 8px 0;
      display: flex;
      align-items: center;
      &:hover {
        cursor pointer;
      }
      .list-block-left {
        img {
          width: 140px;
          height: 140px;
        }
      }
      .list-block-right {
        p {
          text-align left;
          line-height 30px;
        }
      }
    }
  }
</style>